import React, { useEffect, useState } from 'react';
import { Select, Input, Space, Table, Switch, Modal, message } from 'antd'
// import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
import axios from 'axios'
import { connect } from 'react-redux'
// import {kanjshopdel} from '@/api'
import { kanjshopdel, kanjshopFillter } from '../api/index'
import "../index.css"

// 砍价状态
const { Option } = Select;
function handleChange(value) {
    console.log(`selected ${value}`);
}
// 搜索
const { Search } = Input;
const onSearch = value => console.log(value);


const Bargain_goods = (props) => {
    const { kanjiashop } = props

    useEffect(() => {
        bargainGoods()
    }, [])// eslint-disable-line react-hooks/exhaustive-deps
    const bargainGoods = () => {
        axios.get('/bargain').then(res => {
            console.log(res, "shop")
            props.dispatch({
                type: "DATA_KANJIA_SHOP",
                payload: res.data.data
            })
        })
    }
    // table
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            id: 'id',
            align: "center"
        },
        {
            title: '砍价图片',
            dataIndex: 'img',
            id: 'img',
            align: "center",
            render: img => <img style={{ width: 55, height: 55 }} src={img} alt="" />
        },
        {
            title: '砍价名称',
            dataIndex: 'name',
            id: 'name',
            align: "center",
        },
        {
            title: '砍价价格',
            dataIndex: 'kjia',
            id: 'kjia',
            align: "center",
        },
        {
            title: '最低价',
            dataIndex: 'zuijia',
            id: 'zuijia',
            align: "center",
        },
        {
            title: '参与人数',
            dataIndex: 'ren',
            align: "center",
            id: 'ren',
        },
        {
            title: '帮忙砍价人数',
            dataIndex: 'bang',
            align: "center",
            id: 'bang',
        },
        {
            title: '砍价成功人数',
            dataIndex: 'cheng',
            align: "center",
            id: 'cheng',
        },
        {
            title: '限量',
            dataIndex: 'xianl',
            align: "center",
            id: 'xianl',
        },
        {
            title: '限量剩余',
            dataIndex: 'xianls',
            align: "center",
            id: 'xianls',
        },
        {
            title: '结束时间',
            dataIndex: 'time',
            id: 'time',
            align: "center",
        },
        {
            title: '砍价状态',
            dataIndex: 'zhuang',
            align: "center",
            id: 'zhuang',
            render: (text, record) => <Switch checkedChildren="开启" Children="关闭" defaultChecked={record.zhuang ? true : false} onChange={() => change(record)} />

        },
        {
            title: '操作',
            id: 'action',
            align: "center",
            render: (text, record) => (
                <Space size="middle">
                    <span onClick={() => { handleEdit(record.id) }}>编辑</span>

                    <span onClick={() => { handledel(record.id) }}>删除</span>
                </Space>
            ),
        },
    ]
    // 状态
    const change = (record) => {
        if (record.zhuang === 1) {
            record.zhuang = "开启"
        } else {
            record.zhuang = "关闭"
        }
        kanjshopFillter({ id: record.id, sou: record.zhuang }).then(res => {
            bargainGoods()
        })
    }

    // 对话框 编辑
    const [isModalVisible, setIsModalVisible] = useState(false);
    const handleEdit = (id) => {
        setIsModalVisible(true)
    }

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 删除
    const handledel = (id) => {
        console.log(id)
        kanjshopdel({ id: id }).then(res => {
            console.log(res)
        })
        message.success("删除成功")
        bargainGoods()
    }
    // // 添加
    // const [isModalVisibleadd, setIsModalVisibleadd] = useState(false);
    // const handleaddlist = () => {
    //     setIsModalVisibleadd(true);
    // }
    // const handleok = () => {
    //     setIsModalVisibleadd(false);
    // };

    // const handlecancel = () => {
    //     setIsModalVisibleadd(false);
    // };
    // 分页
    return (
        <div className="shop">
            <div className="shop-header">
                <div className="shop-typeSearch">
                    <div className="state">
                        <span>砍价状态：</span>
                        <Select defaultValue="请选择" style={{ width: 180 }} onChange={handleChange}>
                            <Option value="请选择">请选择</Option>
                            <Option value="关闭">关闭</Option>
                            <Option value="开启">开启</Option>
                        </Select>
                    </div>
                    <div className="swearch">
                        <span>商品搜索：</span>
                        <Space>
                            <Search placeholder="商品名称、id" allowClear onSearch={onSearch} style={{ width: 200 }} />
                        </Space>
                    </div>
                </div>
                {/* <Button type="primary" onClick={handleaddlist}>添加砍价商品
                    添加对话框
                    <Modal title="添加砍价商品" visible={isModalVisibleadd} onOk={handleok} onCancel={handlecancel}>
                    </Modal>
                </Button> */}

            </div>
            <div className="shop-main">
                <Table columns={columns} dataSource={kanjiashop} rowKey="id" scroll={{ y: 540 }} style={{ algin: "center" }} />
                {/* 编辑对话框 */}
                <Modal title="编辑砍价商品" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>
            </div>
        </div>
    );
}

export default connect((state) => {
    return {
        kanjiashop: state.kanjiaShop
    }
})(Bargain_goods);
